<template>
	<view class="content">
		<health-title @timeBack="timeBack" Title="女性健康" Type="yearMonth" :showWeek="false" :showTab="false"></health-title>
		<view class="">
			<view class="box1">
				<view class="time-box">
					<view class="title">
						2024年7月
					</view>
					<view class="info">
						暂无记录
					</view>
				</view>
			</view>
			<view class="box3 _df _jb _ac" @click="toAdd">
				<image src="@/static/img/index/tIcon6.png" mode=""></image>
				<view class="" style="margin-right: auto;">
					调整生理周期
				</view>
				<u-icon name="arrow-right" color="#888" size="28"></u-icon>
			</view>
			<view class="box3 _df _jb _ac" @click="toView">
				<view class="">
					了解生理期智能预测
				</view>
				<u-icon name="arrow-right" color="#888" size="28"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from "moment";
	
	export default {
		data() {
			return {
					
			}	
		},
		computed:{
			
		},
		created() {
			
			
		},
		mounted() {
			
		},
		onReady() {
			
		},
		onLoad() {
		
			
		},
		onShow() {
			
		},
		
		methods: {
			toAdd(){
				uni.navigateTo({
					url:'/pages/comA/women/view'
				})
			},
			toView(){
				uni.navigateTo({
					url:'/pages/comA/details?title=了解生理期智能预测' + '&type=2'
				})
			},
			timeBack(e) {
				console.log(e, 666)
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 30rpx 100rpx;
		.box1{
			background: #ffffff;
			padding: 50rpx 30rpx;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
			margin-bottom: 30rpx;
			.time-box{
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #eee;
				.title{
					color: #000;
					font-family: $uni-font-family-Medium;
					font-size: 48rpx;
					margin-bottom: 10rpx;
				}
				.info{
					color: #111;
					font-family: $uni-font-family-Medium;
					font-size: 24rpx;
				}
			}
		}
		
		.box2{
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
			padding: 40rpx 30rpx 10rpx;
			margin-bottom: 30rpx;
			.title{
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #eee;
				color: #171717;
				font-family: $uni-font-family-Bold;
				font-size: 28rpx;
				image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
				}
			}
			.num-box2{
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eee;
				.num{
					font-size: 46rpx;
					font-family: $uni-font-family-Bold;
					color: #171717;
					margin-bottom: 15rpx;
				}
				.txt{
					font-size: 24rpx;
					font-family: $uni-font-family-Medium;
					color: #171717;
				}
				
			}
			.con{
				padding: 40rpx 0 0;
				.jdt1{
					height: 40rpx;
					border-radius: 20rpx 0 0 20rpx;
					background-color: #00B7FF;
				}
				.jdt2{
					height: 40rpx;
					border-radius: 0 20rpx 20rpx 0;
					background-color: #FF4651;
				}
			}
			.info2{
				padding-left: 32rpx;
				position: relative;
				font-family: $uni-font-family-Medium;
				color: #222;
				line-height: 30rpx;
				&::before{
					display: block;
					content: '';
					width: 20rpx;
					height: 20rpx;
					background: #00b7ff;
					border-radius: 6rpx;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -10rpx;
				}
			}
			.info3{
				padding-left: 32rpx;
				position: relative;
				font-family: $uni-font-family-Medium;
				color: #222;
				line-height: 30rpx;
				&::before{
					display: block;
					content: '';
					width: 20rpx;
					height: 20rpx;
					background: #FF4651;
					border-radius: 6rpx;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -10rpx;
				}
			}
			.list{
				padding-top: 40rpx;
				display: flex;
				flex-wrap: wrap;
				.item{
					width: 50%;
					padding-left: 50rpx;
					padding-top: 10rpx;
					box-sizing: border-box;
					margin-bottom: 50rpx;
					position: relative;
					&::before{
						display: block;
						content: '';
						width: 1rpx;
						height: 70rpx;
						background-color: #e2e2e2;
						position: absolute;
						top: 50%;
						right: 0;
						margin-top: -30rpx;
					}
					.num-box{
						height: 58rpx;
						line-height: 58rpx;
						font-family: $uni-font-family-Bold;
						font-size: 50rpx;
						color: #171717;
						
						.dw{
							font-size: 24rpx;
							line-height: 70rpx;
							margin-left: 4rpx;
						}
					}
					.info{
						height: 48rpx;
						line-height: 48rpx;
						font-family: $uni-font-family-Medium;
						font-size: 24rpx;
						color: #222;
					}
				}
				.item:nth-child(2),
				.item:nth-child(4){
					&::before{
						display: none;
					}
				}
			}
		}
		.box3{
			background: #ffffff;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.10); 
			height: 130rpx;
			padding: 0 30rpx;
			color: #222;
			font-family: $uni-font-family-Bold;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			image{
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;
			}
		}
	}
</style>